<template>
  <view class="root">
    <scroll-view class="content-wrapper" scroll-y="true" @scrolltolower="onScrollToLowerMaintenance">
      <navigator
        :url="`/rentalHousing/house_detail?fHouseid=${item.fHouseid}&bName=${item.bName}&roomName=${item.roomName}&isMain=${item.isMain+''}`"
        v-for="(item, index) in houseList" :key="index">
        <view class="scroll-item">
          <image class="housing-manager" :src="`${baseImgUrl}house-owner.png`" v-if="item.isMain"></image>
          <image class="left-img" :src="`${baseImgUrl}house-icon-1.png`"></image>
          <view class="right-wrapper">
            <view class="name">{{item.bName}}</view>
            <view class="address">{{item.roomName}}</view>
          </view>
        </view>
      </navigator>
      <view class="empty-text">{{ finishMaintenance ? '没有更多数据了~' : loading ? '正在加载...' : ''}}</view>
    </scroll-view>
    <template v-if="!houseList.length">
      <u-empty mode="list" text="暂无内容！" :icon="`${baseImgUrl}no-icon2.png`"></u-empty>
    </template>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    rentinghouseHouseList
  } from '../api/api'
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        pageInfo: {
          pageNo: 1,
          pageSize: 50
        },
        finished: false,
        loading: false,
        houseList: [],
        pages: 0
      }
    },
    onShow() {
      this.getList()
    },
    onLoad() {},
    methods: {
      onScrollToLowerMaintenance() {
        if (this.pageInfo.pageNo < this.pages) {
          this.pageInfo.pageNo++
        } else {
          this.finished = true
          return uni.showToast({
            icon: 'none',
            title: '没有更多数据了~'
          })
        }
        this.getList()
      },
      async getList() {
        uni.showLoading({
          title: '加载中'
        });
        let params = {
          ...this.pageInfo
        }
        rentinghouseHouseList(params)
          .then((res) => {
            this.pages = res.result.pages
            this.houseList = res.result.records
          })
          .finally(() => {
            uni.hideLoading();
          })
      }
    }
  }
</script>


<style lang="scss">
  page {
    background: #F9F9F9;
  }
</style>
<style lang="scss" scoped>
  .root {
    padding: 14rpx;

    .content-wrapper {
      .scroll-item {
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        display: flex;
        margin-bottom: 12rpx;
        position: relative;
        padding: 20rpx 26rpx;

        .housing-manager {
          position: absolute;
          right: 0;
          top: 0;
          width: 131.52rpx;
          height: 134.95rpx
        }

        .left-img {
          width: 132rpx;
          height: 132rpx;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          margin-right: 15rpx;
        }

        .right-wrapper {
          .name {
            margin-top: 11rpx;
            margin-bottom: 21rpx;
            font-weight: bold;
            font-size: 36rpx;
            color: #000000;
          }

          .address {
            font-weight: 500;
            font-size: 28rpx;
            color: #AAAAAA;
          }
        }
      }
    }
  }
</style>